<template>

    <div
        class="h-full flex flex-col rounded-[15px] pb-[16px] creation-container"
    >
      <main class="flex-1 min-h-0 px-[10px]">
        <div style="height: 600px;overflow: scroll" class="element"
            v-if="state.lists.length"
            v-infinite-scroll="handleLoadMoreLists"
            :infinite-scroll-delay="200"
            :infinite-scroll-distance="100"
            :infinite-scroll-disabled="canLoadMore"
        >
          <div v-for="(item, index) in state.lists" class="mt-[10px] px-[6px]">
          <div>
            <span style="font-size: 16px;font-weight: 600;">
            {{item.name}}
            </span>
            <!--<span class="font-medium text-lg" style="font-size: 16px;font-weight: 600;"> >></span>-->
          </div>
          <div class="model-lists flex flex-wrap">
            <div
                v-for="(item, index) in item.model_list"
                :key="index"
                class="model-item p-[5px] sm:p-[10px] 2xl:w-1/6"
            >
              <NuxtLink
                  :to="`/create/produce?id=${item?.id}`"
                  class="h-full"
              >
                <el-card
                    class="!border-none h-full rounded-[12px] cardItem"
                    shadow="never"
                    style="box-shadow: 0 3px 10px #ebeefd;position: relative"
                    :body-style="{
                                        height: '100%',
                                        padding: '20px'
                                    }"
                >
                <div v-if="userStore.isLogin">

                  <div v-if="!(userStore.userInfo.is_member == 1 && userStore.userInfo.member_expired == 0)">
                    <div data-v-3b606504="" class="item-label item-label-free" v-if="item.balance == 0">
                      <span data-v-3b606504="">限免</span>
                    </div>
                  </div>
                  <div v-else>
                    <div data-v-3b606504="" class="item-labelv1 item-label-freev1" v-if="item.balance == 0">
                      <img data-v-3b606504="" src="https://www.caixue8.cn/uploads/wap/f-vip_1.png" alt="" class="icon1">
                      <span data-v-3b606504="" style="padding-top: 1px;">限免</span>
                    </div>
                  </div>
                </div>

                  <div class="h-full flex flex-col">
                    <div v-if="userStore.isLogin">
                    <div v-if="!(userStore.userInfo.is_member == 1 && userStore.userInfo.member_expired == 0)">
                      <div data-v-3b606504="" class="item-label-coin item-label flex-center" v-if="item.balance > 0">
                        <img data-v-3b606504="" src="https://www.caixue8.cn/uploads/wap/T-32.png" alt="" class="icon">
                        <span data-v-3b606504="" style="padding-top: 1px;">{{item.balance}}</span>
                      </div>
                    </div>
                    <div v-else>
                      <div data-v-3b606504="" class="item-label-coinv1 item-label flex-center" v-if="item.balance > 0">
                        <img data-v-3b606504="" src="https://www.caixue8.cn/uploads/wap/f-vip_1.png" alt="" class="icon1">
                        <span data-v-3b606504="" style="padding-top: 1px;">{{item.balance}}</span>
                      </div>
                    </div>
                    </div>

                    <div class="flex">
                      <div class="flex items-center">
                        <img v-if="!(userStore.userInfo.is_member == 1 && userStore.userInfo.member_expired == 0)"
                            class="w-[34px] h-[34px] mr-[10px] rounded-lg"
                            :src="item?.image"
                            alt=""
                        />
                        <div v-else style="position: relative">
                         <!-- <img src="https://www.caixue8.cn/uploads/wap/f-vip_1.png" class="pos">-->
                          <img
                               class="w-[34px] h-[34px] mr-[10px] rounded-lg"
                               :src="item?.image"
                               alt=""
                          />
                        </div>
                        <div
                            class="text-lg font-medium line-clamp-1"
                        >
                          {{ item?.name }}
                        </div>
                      </div>
                      <div
                          class="ml-auto collect"
                          @click.prevent="
                                                    Collection(item)
                                                "
                      >
                        <div class="scale-[0.85]">
                          <Icon
                              v-if="
                                                            item?.is_collect ==
                                                            false
                                                        "
                              :size="24"
                              color="#999"
                              name="el-icon-Star"
                          />
                        </div>
                        <Icon
                            v-if="
                                                        item?.is_collect == true
                                                    "
                            :size="24"
                            name="el-icon-StarFilled"
                            color="#FFB529"
                        />
                      </div>
                    </div>
                    <div
                        v-if="item?.tips"
                        class="text-xs text-tx-secondary mt-[10px] line-clamp-2 flex-1"
                    >
                      {{ item?.tips }}
                    </div>
                    <div
                        class="flex mt-[15px] items-center"
                    >
                      <!-- <span
                           class="text-tx-secondary text-sm mr-auto"
                           >🔥 {{ item.use_num }}人使用过
                       </span>-->
                      <span
                          class="arrow-right text-primary flex"
                      >
                                                <Icon
                                                    name="el-icon-Right"
                                                    size="20"
                                                />
                                            </span>
                    </div>
                  </div>
                </el-card>
              </NuxtLink>
            </div>
          </div>
          </div>
        </div>
      </main>
    </div>

</template>

<script setup lang="ts">
import { watchDebounced } from '@vueuse/core'
import {
  getCreationCategory,
  creationCollection,
  getCreationListsByCategory,
  getCreationCategoryv1, homeCate
} from '@/api/create'
import emptyCom from '@/components/empty-com/index.vue'
import { Swiper as SwiperInstance } from 'swiper'
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css'
import { Loading, Search } from '@element-plus/icons-vue'
import { getdecorate } from '~/api'
import { useAppStore } from '~/stores/app'
import {useUserStore} from "~/stores/user";
const userStore = useUserStore()
const { getImageUrl } = useAppStore()

const queryParams = reactive({
  keyword: ''
})
const { data: categoryList, refresh } = await useAsyncData(
    () => homeCate({
      pageSize:12
    }),
    {
      default() {
        return []
      }
    }
)

const state = reactive({
  page: 1,
  size: 25,
  count: 2,
  loading: false,
  lists: categoryList.value
})

const pageData = computed(() => {
  try {
    return JSON.parse(pages.value.data)
  } catch (error) {
    console.error(error)
    return []
  }
})

const getTitleColor = computed(() => {
  return (type: number) => {
    switch (type) {
      case 1:
        return 'text-black'
      case 2:
        return 'text-white'
      case 3:
        return 'text-primary'
    }
  }
})

// 是否加载更多分页
const canLoadMore = computed(() => {
  return state.page * state.size > state?.lists?.length
})

const resetPages = async () => {
  state.page = 1
  await getLists()
  state.lists = []
  state.count = creationLists.value.count
  await nextTick()
  state.lists = creationLists.value.lists
}

const handleQueryLists = async () => {
  const data = await homeCate({pageSize: 8
  })
  state.page = data.page_no
  state.count = data.count
  if (data.page_no === 1) {
    state.lists = data.lists
  } else {
    state.lists.push(...data.lists)
  }
  setTimeout(() => (state.loading = false), 500)
}

const handleLoadMoreLists = async () => {
  console.log(state.page * state.size, state?.lists?.length)
  if (state.loading) return
  if (canLoadMore.value) return
  state.page += 1
  try {
    state.loading = true
    await handleQueryLists()
  } catch (e) {
    state.loading = false
  }
}

const swiperInstance = shallowRef<SwiperInstance>()
const onSwiper = (swiper: SwiperInstance) => {
  swiperInstance.value = swiper
  console.log(swiper)
}

const slidePrev = () => {
  swiperInstance.value?.slidePrev()
}

const slideNext = () => {
  swiperInstance.value?.slideNext()
}

const selectCategory = async (index: any) => {
  queryParams.category_id = categoryList.value[index]?.id
  await resetPages()
}

const Collection = async (row: any) => {
  try {
    await creationCollection({ id: row.id })
    row.is_collect = !row.is_collect
  } catch (e) {}
}

definePageMeta({
  layout: false
})
watchDebounced(
    () => queryParams.keyword,
    () => {
      state.page = 1
      resetPages()
    },
    {
      debounce: 500
    }
)
</script>

<style lang="scss" scoped>
.element::-webkit-scrollbar { width: 0 !important }

.element { -ms-overflow-style: none; }

Firefox

.element { overflow: -moz-scrollbars-none; }
.creation-header {
  height: 220px;
  border-radius: 15px;
  background-size: 100% auto;
  background-repeat: no-repeat;
  .search {
    :deep(.el-input) {
      .el-input__wrapper {
        border: none;
        padding-left: 20px;
        height: 50px;
        border-radius: 8px;
        background-color: #ffffff;
      }
    }
  }
}
.swiper-button-prev,
.swiper-button-next {
  position: relative;
  z-index: 99;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100px;
  cursor: pointer;
  // &.swiper-button-disabled {
  //     opacity: 0;
  // }
}
.creation-lists {
  flex: 1;
  min-width: 0;
  padding: 10px 0;
  .creation-item {
    line-height: 40px;
    border-radius: 8px;
    box-shadow: 0 2px 6px #ebeefd;
    text-align: center;
    height: 40px;
    padding: 0px 24px;
    font-size: 14px;
    cursor: pointer;
    @apply line-clamp-1 text-tx-primary;
    &--active {
      @apply text-btn-text;
      box-shadow: 0 3px 6px #ebeefd;
      background: linear-gradient(
              87.73deg,
              var(--gradient-1) 0%,
              var(--gradient-2) 100%
      );
    }
  }
}
.cardItem {
  .collect {
    opacity: 0;
    transition: all linear 0.2s;
  }
  :hover {
    .collect {
      opacity: 1;
    }
  }
}
.item-label-free {
  width: 62px;
  background: #ffd700;
  color: #784c2c;
  text-align: center;
}
.item-label-freev1 {
  width: 62px;
  background: #ebcd77;
  color: #784c2c;
  text-align: center;
}
.item-label{
  position: absolute;
  top: 0;
  right: 0;
  height: 22px;
  line-height: 22px;
  border-top-right-radius: 9px;
  border-bottom-left-radius: 9px;
  font-size: 12px;
  font-weight: 700;
}


.item-labelv1{
  position: absolute;
  top: 0;
  right: 0;
  height: 22px;
  line-height: 22px;
  border-top-right-radius: 9px;
  border-bottom-left-radius: 9px;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  justify-content: center;
  align-items: center;
}


.item-label-coin{
  background-color: #fb9803;
  padding: 0 10px;
  font-weight: 500;
  color: #2b2727;
}

.item-label-coinv1{
  background-color: #fcd8bd;
  padding: 0 10px;
  font-weight: 500;
  color: #784c2c;
}

.icon{
  display: block;
  width: 8px;
  height: 8px;
  margin-right: 5px;
  border-radius: 30px;
}

.icon1{
  display: block;
  width: 16px;
  height: 16px;
  margin-right: 5px;

}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.cate-cla {
  padding: 5px 10px 5px 10px;
  font-weight: 600;
  font-size: 20px;
  margin-top: 10px;
  border:2px solid #ebcd77;
  color: #ebcd77;
  text-align: center;
  margin-left: 10px;
  border-radius: 5px;
}

</style>
